<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
    <style>
        .p {
            font-size: 24px;
            color: #ff0000;
        }

        .modifyFont {
            color: #ff0000;
            font-size: 36px;
            background-color: #ffff00;
            width: 300px;
            height: 60px;
        }
    </style>
</head>
<body>
    <h1>这是测试的标题1</h1>
    <p class="p">这是段落内容</p>
<!--    <button onclick="htmlFunc()">修改</button>-->
    <p class="modify">这是交互需要修改的内容</p>
    <button class="webSide">调用应用侧方法修改数据</button>

    <script>
        function htmlFunc() {
            const dom = document.querySelector('.modify')
            dom.innerHTML = '修改后的文本'
            dom.classList.add('modifyFont')

            throw new Error('自定义抛出的异常')

            // return 'htmlFunc函数中的返回值'
            // return { name: '张三', age: 18, sex: 'male', }
        }

        function add(num1, num2) {
            return num1 + num2 + Math.floor(Math.random() * 15)
        }

        // 在前端页面中，通过注册到页面的对象名称 appSide 来调用到应用侧对象的相关功能。
        document.querySelector('.webSide').onclick = () => {
            // appSide.modifyMessage()
            appSide.modifyMsg('前端页面来源的数据...')
        }
    </script>
</body>
</html>